<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <style>
        .cus-container {
            width: 100%; /* 宽度自动适应页面 */
            margin: 0 auto; /* 居中显示 */
        }
        .table {
            font-size: 14px; /* 缩小表格字体 */
        }
        .table th, .table td {
            padding: 8px; /* 缩小单元格内边距 */
        }
        .pagination {
            margin: 10px 0; /* 调整分页导航的边距 */
        }
        .text-muted {
            margin-top: 10px; /* 调整分页信息的边距 */
        }
    </style>
</head>
<body>
    <div class="container cus-container">
        <div>
            <!-- 搜索框 -->
            <div id="search-link" style="float: left; margin: 10px 0px;">
                <form class="form-inline" action="${pageContext.request.contextPath}/links/list" method="get">
                    <div class="form-group">
                        <label for="searchInput">链接名称</label>
                        <input type="text" name="links_name" class="form-control" id="searchInput" value="${links.links_name}">
                    </div>
                    <div class="form-group">
                        <label for="urlInput">链接地址</label>
                        <input type="text" name="links_url" class="form-control" id="urlInput" value="${links.links_url}">
                    </div>
                    <button type="submit" class="btn btn-default">查询</button>
                    <button type="button" class="btn btn-default" onclick="clearSearch()">清空</button>
                </form>
            </div>

            <!-- 操作按钮 -->
            <div style="float: right; margin: 10px 0px;">
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/links/add">添加链接</a>
                <a class="btn btn-primary" onclick="deleteSelected()">删除选中</a>
            </div>
        </div>
        <!-- 数据表格 -->
        <table class="table table-bordered clearfix" id="link-list">
            <thead>
                <tr class="bg-primary">
                    <th><input type="checkbox" id="selectAll"></th>
                    <th>ID</th>
                    <th>链接名称</th>
                    <th>链接地址</th>
<%--                    <th>描述</th>--%>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                
                <c:forEach var="link" items="${pageInfo.list}">
                    <tr>
                        <td><input type="checkbox" name="id" value="${link.links_id}"></td>
                        <td>${link.links_id}</td>
                        <td>${link.links_name}</td>
                        <td>${link.links_url}</td>
<%--                        <td>${link.description}</td>--%>
                        <td>
                            <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/links/huixian?links_id=${link.links_id}">编辑</a>
                            <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/links/delete?links_id=${link.links_id} ">删除</a>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>

        <!-- 分页导航 -->
        <div class="text-center">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/links/list?currentPage=1&pageSize=${pageInfo.pageSize}&links_name=${param.links_name}&links_url=${param.links_url}" aria-label="First">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>
                    <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/links/list?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}&links_name=${param.links_name}&links_url=${param.links_url}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <c:set var="startPage" value="${pageInfo.pageNum - 4}" />
                    <c:if test="${startPage < 1}">
                        <c:set var="startPage" value="1" />
                    </c:if>
                    <c:set var="endPage" value="${startPage + 9}" />
                    <c:if test="${endPage > pageInfo.pages}">
                        <c:set var="endPage" value="${pageInfo.pages}" />
                        <c:if test="${endPage - startPage + 1 < 10}">
                            <c:set var="startPage" value="${endPage - 9}" />
                            <c:if test="${startPage < 1}">
                                <c:set var="startPage" value="1" />
                            </c:if>
                        </c:if>
                    </c:if>
                    <c:forEach begin="${startPage}" end="${endPage}" var="i">
                        <li class="${i == pageInfo.pageNum ? 'active' : ''}">
                            <a href="${pageContext.request.contextPath}/links/list?currentPage=${i}&pageSize=${pageInfo.pageSize}&links_name=${param.links_name}&links_url=${param.links_url}">${i}</a>
                        </li>
                    </c:forEach>
                    <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/links/list?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}&links_name=${param.links_name}&links_url=${param.links_url}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/links/list?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&links_name=${param.links_name}&links_url=${param.links_url}" aria-label="Last">
                            <span aria-hidden="true">尾页</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="text-muted">
                当前第${pageInfo.pageNum}页/共${pageInfo.pages}页，共${pageInfo.total}条数据
                每页显示<select name="pageSize" onchange="changePageSize(this.value)">
                    <option value="5" <c:if test="${pageInfo.pageSize == 5}">selected</c:if>>5</option>
                    <option value="10" <c:if test="${pageInfo.pageSize == 10}">selected</c:if>>10</option>
                    <option value="15" <c:if test="${pageInfo.pageSize == 15}">selected</c:if>>15</option>
                    <option value="20" <c:if test="${pageInfo.pageSize == 20}">selected</c:if>>20</option>
                </select>条数据
            </div>
        </div>
        <c:set var="startPage" value="${pageInfo.pageNum - 5}" />
        <c:if test="${startPage < 1}">
            <c:set var="startPage" value="1" />
        </c:if>
        <c:set var="endPage" value="${startPage + 9}" />
        <c:if test="${endPage > pageInfo.pages}">
            <c:set var="endPage" value="${pageInfo.pages}" />
            <c:set var="startPage" value="${endPage - 9}" />
            <c:if test="${startPage < 1}">
                <c:set var="startPage" value="1" />
            </c:if>
        </c:if>
    </div>

</body>

</html>

    <script>
        // 清空查询条件
        function clearSearch() {
            $("#searchInput").val("");
            $("#urlInput").val("");
            window.location.href = "${pageContext.request.contextPath}/links/list";
        }

        <%--// 删除单个数据--%>
        <%--function deleteItem(id) {--%>
        <%--    if (confirm("确认删除吗？")) {--%>
        <%--        $.post(--%>
        <%--            "${pageContext.request.contextPath}/links/delete",--%>
        <%--            { "id": id },--%>
        <%--            function(res) {--%>
        <%--                if (res.flag) {--%>
        <%--                    location.reload();--%>
        <%--                } else {--%>
        <%--                    alert("删除失败");--%>
        <%--                }--%>
        <%--            },--%>
        <%--            "json"--%>
        <%--        );--%>
        <%--    }--%>
        <%--}--%>


        <%--// 批量删除--%>
        <%--function deleteSelected() {--%>
        <%--    if (confirm("确认删除选中项吗？")) {--%>
        <%--        var ids = [];--%>
        <%--        $("#link-list tbody input").each(function() {--%>
        <%--            if ($(this).prop("checked")) {--%>
        <%--                ids.push($(this).val());--%>
        <%--            }--%>
        <%--        });--%>
        <%--        $.post(--%>
        <%--            "${pageContext.request.contextPath}/link/deleteBatch",--%>
        <%--            { "ids": ids.join(",") },--%>
        <%--            function(res) {--%>
        <%--                if (res.flag) {--%>
        <%--                    location.reload();--%>
        <%--                } else {--%>
        <%--                    alert("删除失败");--%>
        <%--                }--%>
        <%--            },--%>
        <%--            "json"--%>
        <%--        );--%>
        <%--    }--%>
        <%--}--%>

        // 全选/取消全选
        $("#selectAll").click(function() {
            var checked = $(this).prop("checked");
            $("#link-list tbody input").prop("checked", checked);
        });
    </script>

<script>
    // 改变每页显示条数
    function changePageSize(pageSize) {
        // 获取当前页码
        var currentPage = ${pageInfo.pageNum};
        // 保留当前页码，而不是跳转到第一页
        window.location.href = "${pageContext.request.contextPath}/links/list?currentPage=" + currentPage + "&pageSize=" + pageSize + "&u_name=${param.u_name}&u_sex=${param.u_sex}&u_email=${param.u_email}&u_phone=${param.u_phone}";
    }
</script>